<template>
    <!-- 自提门店信息 -->
    <view>
        <view class="pages" style="box-shadow: 2px 4px 8px 0px #f5f5f5">
            <view class="topbox">
                <view class="location" @tap="checkPermission">重新定位</view>
                <view class="flexs align-center" style="clear: both">
                    <image src="/static/images/adds.png" class="topboxaddicon margin-right"></image>
                    <view>
                        <view class="toptext">
                            <view class="text-black text-dg text-darkGray">{{ address }}</view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="msgbox">
                <view class="padding-sm" v-for="(item, index) in stroeList" :key="index">
                    <view class="flexs">
                        <!-- <image wx:if="{{item.cover}}" class="item-img" mode="aspectFit" src="{{item.cover}}"></image> -->
                        <image class="item-img" mode="aspectFit" src="https://yiyueuser.oss-cn-shenzhen.aliyuncs.com/2022-02-15/92b0b6c61ee6472c9f0d4961963c57a5-file"></image>
                        <view style="flex: 1">
                            <view class="flexs justify-between align-center">
                                <view class="flexs align-center mb-10 flexs_wrap">
                                    <view class="margin-right-xs storename">{{ item.storename }}</view>
                                    <view class="text-darkGray text-sm">{{ item.mobile }}</view>
                                </view>
                                <view class="text-orange text-sm">距您{{ item.distance }}</view>
                            </view>
                            <view class="text-darkGray text-dm">
                                {{ item.storeLocationDto.provinceName }}{{ item.storeLocationDto.cityName }}{{ item.storeLocationDto.districtName
                                }}{{ item.storeLocationDto.location }}
                            </view>
                        </view>
                    </view>

                    <view class="timebox">
                        <view>营业时间: {{ item.starttime }}-{{ item.endtime }}</view>
                        <view v-if="btnBool === true" class="confirm" @tap="confirm" :data-item="item">选择</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// shopingmall/stroemsg/stroemsg.js
const _request = require('../../utils/request.js');

const app = getApp();

let QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');

import { qqMapToBMap } from '../../utils/util.js';
let qqmapsdk = new QQMapWX({
    key: 'MBEBZ-6VQCP-EYSDK-LT7FQ-2LNUS-G4BTN'
});
export default {
    data() {
        return {
            productId: '',

            //商品id
            stroeList: [],

            index: '',
            address: '',
            storeid: '',

            // 选择按钮是否展示
            btnBool: true,

            mobile: '',
            storename: '',
            distributionType: '',
            path: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        this.setData({
            productId: options.productId,
            index: options.index
        });

        if (options.btnBool) {
            this.setData({
                btnBool: options.btnBool
            });
        }
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        //定位
        this.checkPermission();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {
        // 判断是否选择门店了
        if (this.storeid) {
            uni.setStorageSync('select_storeid', this.storeid);
        } else {
            uni.setStorageSync('select_storeid', '');
        }
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        getStoreList(location) {
            //门店列表
            _request
                .get(
                    '/yy-stores/getPickUpStore',
                    {
                        productId: this.productId,
                        longitude: location?.longitude || parseFloat(uni.getStorageSync('location')?.longitude || 0),
                        latitude: location?.latitude || parseFloat(uni.getStorageSync('location')?.latitude || 0)
                    },
                    app.globalData.mallType
                )
                .then((res) => {
                    if (res.data.code === 200) {
                        let list = res.data.data || [];
                        list.filter((item) => {
                            if (item.distance > 1000) {
                                item.distance = (item.distance / 1000).toFixed(1) + 'km';
                            } else {
                                item.distance = (item.distance || 0) + 'm';
                            }

                            return item;
                        });
                        this.setData({
                            stroeList: list
                        });
                    } else {
                        uni.showToast({
                            title: res.data.message,
                            icon: 'none'
                        });
                    }
                });
        },

        confirm(e) {
            let item = e.currentTarget.dataset.item;
            let pages = getCurrentPages();
            let prevPage = pages[pages.length - 2];
            prevPage.setData({
                mobile: item.mobile,
                storename: item.storename,
                storeid: item.storeLocationDto.storeid,
                distributionType: '2',
                path: item.storeLocationDto.provinceName + item.storeLocationDto.cityName + item.storeLocationDto.districtName + item.storeLocationDto.location
            });
            this.setData({
                storeid: item.storeLocationDto.storeid
            });
            uni.navigateBack({
                url: '/shopingmall/order/order'
            });
        },

        //检查权限
        checkPermission() {
            let vm = this;
            uni.getSetting({
                success(res) {
                    console.log('---->>', res);

                    if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
                        uni.showModal({
                            title: '请求授权当前位置',
                            content: '需要获取您的地理位置，请确认授权',
                            success: function (res) {
                                if (res.cancel) {
                                    uni.showToast({
                                        title: '拒绝授权',
                                        icon: 'none',
                                        duration: 1000
                                    });
                                } else if (res.confirm) {
                                    uni.openSetting({
                                        success: (dataAu) => {
                                            if (dataAu.authSetting['scope.userLocation'] == true) {
                                                uni.showToast({
                                                    title: '授权成功',
                                                    icon: 'success',
                                                    duration: 1000
                                                }); //再次授权，调用wx.getLocation的API

                                                vm.getLocation();
                                            } else {
                                                uni.showToast({
                                                    title: '授权失败',
                                                    icon: 'none',
                                                    duration: 1000
                                                });
                                            }
                                        },
                                        fail: (e) => {
                                            vm.getLocation();
                                        }
                                    });
                                }
                            }
                        });
                    } else if (res.authSetting['scope.userLocation'] == undefined) {
                        // 不存在就获取权限
                        vm.getLocation();
                    } else {
                        //调用wx.getLocation的API
                        vm.getLocation();
                    }
                }
            });
        },

        // 授权定位权限
        getLocation() {
            let vm = this;
            let location;
            uni.getLocation({
                type: 'gcj02',
                success: function (res) {
                    location = res;
                    vm.getStoreList(location); // 经纬度转城市

                    qqmapsdk.reverseGeocoder({
                        //位置坐标
                        location: {
                            latitude: location.latitude,
                            longitude: location.longitude
                        },
                        //get_poi: 1, //是否返回周边POI列表：1.返回；0不返回(默认),非必须参数
                        success: function (res) {
                            //成功后的回调
                            var res = res.result;
                            var mks = [];
                            mks.push({
                                // 获取返回结果，放到mks数组中
                                title: res.address,
                                id: 0,
                                latitude: location.lat,
                                longitude: location.lng,
                                iconPath: '/static/shopingmall/stroemsg/resources/placeholder.png',
                                //图标路径
                                width: 20,
                                height: 20,
                                callout: {
                                    //在markers上展示地址名称，根据需求是否需要
                                    content: res.address,
                                    color: '#000',
                                    display: 'ALWAYS'
                                },
                                ad_info: res.ad_info,
                                address_component: res.address_component
                            });
                            uni.setStorageSync('mycity', res.ad_info.city);
                            vm.setData({
                                address: res.address
                            });
                        },
                        fail: function (error) {
                            console.error(error);
                        },
                        complete: function (res) {}
                    });
                },
                fail: function (error) {
                    if (error.errMsg == 'getLocation:fail:ERROR_NOCELL&WIFI_LOCATIONSWITCHOFF') {
                        uni.showToast({
                            title: '请打开GPS重新定位',
                            icon: 'none',
                            duration: 2000
                        });
                    }

                    console.log(error, 'error');
                }
            });
        }
    }
};
</script>
<style>
page {
    background: #fbfbfb;
}

.pages {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #fbfbfb;
}

.topbox {
    width: 710rpx;
    min-height: 180rpx;
    background: #fff;
    margin-top: 20rpx;
    box-shadow: 2rpx 2rpx 8rpx 0rpx rgba(236, 236, 236, 0.4);
    border-radius: 12rpx;
}

.location {
    float: right;
    padding-top: 20rpx;
    padding-right: 20rpx;
    font-size: 28rpx;
    color: #ff8722;
    text-decoration: underline;
}

.topboxaddicon {
    width: 80rpx;
    height: 80rpx;
    margin-left: 20rpx;
}

.toptext {
    display: flex;
    align-items: center;
}

.toprighticon {
    width: 32rpx;
    height: 32rpx;
}

.msgbox {
    width: 710rpx;
    min-height: 250rpx;
    background: #fff;
    margin-top: 20rpx;
    box-shadow: 2rpx 2rpx 8rpx 0rpx rgba(236, 236, 236, 0.4);
    border-radius: 12rpx;
}

.msgimg {
    width: 120rpx;
    height: 100rpx;
    margin-right: 20rpx;
}

.timebox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 26rpx;
    color: #666;
}

.confirm {
    width: 120rpx;
    height: 56rpx;
    background: #ff8722;
    color: #ffffff;
    font-size: 28rpx;
    line-height: 54rpx;
    text-align: center;
    border-radius: 44rpx;
}

.storename {
    max-width: 194px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.flexs_wrap {
    flex-wrap: wrap;
}

.align-center .text-orange {
    min-width: 132rpx;
}

.item-img {
    width: 120rpx;
    height: 120rpx;
    margin-right: 20rpx;
    border-radius: 8rpx;
}
</style>
